<template>
    <div class="news">
        <Header></Header>
        <div class="content">
            <div class="title">
                <div class="title-line">
                    <span>消息中心</span>
                    <ul class="msg-btns">
                        <li class="notice" :class="{active: infoSign.noticeSign}" @click="noticeSort"></li>
                        <li class="modify" :class="{active: infoSign.modifySign}" @click="modifySort"></li>
                        <li class="electricity" :class="{active: infoSign.eleSign}" @click="eleSort"></li>
                        <li class="date" :class="{active: infoSign.dateSign}" @click="dateSort">日期</li>
                        <li class="no-read" :class="{active: infoSign.readSign}" @click="readSort">未读</li>
                    </ul>
                    <button type="button" class="fr subscribe" @click="subscribe">订阅</button>
                </div>
            </div>
            <div class="msg-item">
                <ul>
                    <li v-for="msg in alarmMsg">
                        <el-row>
                            <el-col :span="2" class="time tr">
                                <span>{{ msg.timeYear }}</span>
                                <i class="icon" :class="{ modify : msg.sign === 'modify', ele : msg.sign === 'ele'}"></i>
                            </el-col>
                            <el-col :span="22" class="text">
                                <span class="text-content" :title="msg.msg">{{ msg.msg }}</span>
                                <span class="not-read-sign">未读</span>
                                <span class="not-read-sign scan" @click="scanMsg">查看</span>
                            </el-col>
                        </el-row>
                    </li>
                    <li>
                        <el-row>
                            <el-col :span="2" class="time tr">
                                <span>2017-12-12</span>
                                <i class="icon"></i>
                            </el-col>
                            <el-col :span="22" class="text">
                                <span class="text-content">固定资产方天画戟被移动了水电费阿斯蒂芬水电费阿斯蒂芬爱妃阿斯蒂芬阿斯蒂芬大是大非爱妃按时固定资产方天画戟被移动了水电费阿斯蒂芬水电费阿斯蒂芬爱妃阿斯蒂芬阿斯蒂芬大是大非爱妃按时</span>
                                <span class="not-read-sign">未读</span>
                                <span class="not-read-sign scan" @click="scanMsg">查看</span>
                            </el-col>
                        </el-row>
                    </li>
                    <li>
                        <el-row>
                            <el-col :span="2" class="time tr">
                                <span>2017-12-12</span>
                                <i class="icon modify"></i>
                            </el-col>
                            <el-col :span="22" class="text">
                                <span class="text-content">11台固定资产椅子的绑定电子标签。请尽快将电子标签贴到对应的固定资产上。</span>
                                <span class="not-read-sign read-sign">已读</span>
                                <span class="not-read-sign scan">查看</span>
                            </el-col>
                        </el-row>
                    </li>
                    <li>
                        <el-row>
                            <el-col :span="2" class="time tr">
                                <span>2017-12-12</span>
                                <i class="icon ele"></i>
                            </el-col>
                            <el-col :span="22" class="text">
                                <span class="text-content">阅读器123412电量为5%，请尽快更换电池。</span>
                                <span class="not-read-sign read-sign">已读</span>
                                <span class="not-read-sign scan">查看</span>
                            </el-col>
                        </el-row>
                    </li>
                </ul>
            </div>
        </div>
        <!--订阅-->
        <el-dialog
            title=""
            :visible.sync="subscribeVisible"
            width="30%">
            <div class="content">
                <ul>
                    <li>
                    </li>
                    <li>
                        <label>
                            <input type="email"
                                   placeholder="请输入电子邮箱账号"
                                   v-model="email">
                        </label>
                    </li>
                    <li>
                    </li>
                </ul>
                <p>订阅后，您的电子邮箱将会收到实时消息。</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="dialog-big-button" @click="subscribeConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Header from '@/components/header'

    export default {
        name: "news",
        components: {
            Header
        },
        data() {
            return {
                subscribeVisible: false,
                infoSign: {
                    noticeSign: true,
                    modifySign: false,
                    eleSign: false,
                    dateSign: false,
                    readSign: false,
                },
                email: '',
                alarmMsg: []
            }
        },
        methods: {
            goRouter(sign) {
                switch (sign) {
                    case 'checkAsset':
                        this.$router.push({path: '/layout/checkAssets'})
                        break
                    case 'addAsset':
                        this.$router.push({path: '/layout/addAssets'})
                        break
                    case 'checkLabel':
                        this.$router.push({path: '/layout/checkLabel'})
                        break
                    case 'addLabel':
                        this.$router.push({path: '/layout/addLabel'})
                        break
                    case 'checkArea':
                        this.$router.push({path: '/layout/checkArea'})
                        break
                    case 'addArea':
                        this.$router.push({path: '/layout/placeArea'})
                        break
                    case 'checkReader':
                        this.$router.push({path: '/layout/checkReader'})
                        break
                    case 'addReader':
                        this.$router.push({path: '/layout/placeReader'})
                        break
                    default:
                        return
                }
            },
            /**
             * 消息排序函数，
             * 点击请求后台
             */
            sortClick(sign) {
                for (let i in this.infoSign) {
                    this.infoSign[i] = false
                }
                switch (sign) {
                    case 'notice':
                        this.infoSign.noticeSign = true
                        break
                    case 'modify':
                        this.infoSign.modifySign = true
                        break
                    case 'ele':
                        this.infoSign.eleSign = true
                        break
                    case 'date':
                        this.infoSign.dateSign = true
                        break
                    case 'read':
                        this.infoSign.readSign = true
                        break
                    default:
                        break
                }
            },
            noticeSort() {
                this.sortClick('notice')
            },
            modifySort() {
                this.sortClick('modify')
            },
            eleSort() {
                this.sortClick('ele')
            },
            dateSort() {
                this.sortClick('date')
            },
            readSort() {
                this.sortClick('read')
            },
            /**
             * 消息查看
             */
            scanMsg() {
                this.$router.push({path: '/layout/checkAssets'})
            },
            /**
             * 订阅
             */
            subscribe() {
                this.subscribeVisible = true
            },
            subscribeConfirm() {
                let regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if (!regex.test(this.email)) {
                    this.$message.error(this.$msgDictionary.email.errorEmail)
                } else {
                    this.$message.success(this.$msgDictionary.subscribe.suc)
                    this.subscribeVisible = false
                }
            },
            getSocket(way) {
                let userId = 1
                if (localStorage.getItem("user")) {
                    userId = JSON.parse(localStorage.getItem("user")).userId
                }
                // 建立连接对象（还未发起连接）
                let sock = new SockJS("http://218.17.162.120:9096/rfid/websocket")
                // 获取 STOMP 子协议的客户端对象
                let stomp = Stomp.over(sock)
                // 向服务器发起websocket连接并发送CONNECT帧
                stomp.connect(
                    {},
                    (frame) => {
                        // 连接成功时（服务器响应 CONNECTED 帧）的回调方法
                        stomp.subscribe(`/user/${userId}/${way}`,
                            (rsp) => {
                                // 订阅后 的 回调
                                let msgObj = {}
                                let json = JSON.parse(rsp.body)
                                msgObj.timeYear = json.time.slice(0,10)
                                if (way === 'lost') {
                                    msgObj.msg = `固定资产${json.assetsName}在${json.time}时丢失了`
                                    msgObj.sign = 'warn'
                                } else if (way === 'move') {
                                    msgObj.msg = `固定资产${json.assetsName}在${json.time}时，从${json.artificialAreaName}移动到了${json.currentAreaName}`
                                    msgObj.sign = 'warn'
                                }
                                this.alarmMsg.unshift(msgObj)
                                if (this.alarmMsg.length > 15) {
                                    this.alarmMsg.splice(15)
                                }
                            })
                    },
                    (error) => {
                        // 连接失败时（服务器响应 ERROR 帧）的回调方法
                        this.$message.error(error)
                    })
            }
        },
        mounted() {
            this.getSocket('lost')
            this.getSocket('move')
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/color";

    .content {
        height: 90vh;
        box-sizing: border-box;
        padding: 0.6rem 1rem;
        .title {
            .title-line {
                border-left: 0.05rem solid $strong_red;
                height: 0.3rem;
                line-height: 0.3rem;
                padding-left: 0.3rem;
                font-size: 0.20rem;
                .msg-btns {
                    display: inline-block;
                    vertical-align: middle;
                    width: 400px;
                    padding-left: 1rem;
                    color: $ph_color;
                    li {
                        float: left;
                        margin-left: 0.1rem;
                        min-width: 30px;
                        height: 33px;
                        line-height: 33px;
                        background: url("../assets/images/spirit.png") no-repeat -50px -148px;
                        cursor: pointer;
                        &.notice {
                            &.active {
                                background-position: 2px -148px;
                            }
                        }
                        &.modify {
                            background-position: -147px -146px;
                            &.active {
                                background-position: -97px -146px;
                            }
                        }
                        &.electricity {
                            background-position: -249px -141px;
                            &.active {
                                background-position: -198px -141px;
                            }
                        }
                        &.date {
                            background: none;
                            &.active {
                                color: $strong_red;
                            }
                        }
                        &.no-read {
                            background: none;
                            &.active {
                                color: $strong_red;
                            }
                        }
                    }
                }
                .subscribe {
                    margin-right: 0.5rem;
                    border: 1px solid #FF3F30;
                    color: #FF6B30;
                    height: 0.5rem;
                    width: 1.6rem;
                    background: transparent;
                    border-radius: 0.25rem;
                    outline: none;
                    cursor: pointer;
                    font-size: 0.16rem;
                }
            }
        }
        .msg-item {
            margin-top: 0.3rem;
            font-size: 0.16rem;
            height: 6.5rem;
            overflow: auto;
            li {
                height: 0.46rem;
                .time {
                    line-height: 0.46rem;
                    border-right: 1px solid $ph_color;
                    padding-right: 0.3rem;
                    position: relative;
                    .icon {
                        position: absolute;
                        right: -16px;
                        top: 39%;
                        margin-top: -18px;
                        width: 30px;
                        height: 37px;
                        background: $white url("../assets/images/spirit.png") no-repeat 2px -143px;
                        &.modify {
                            background-position: -97px -141px;
                        }
                        &.ele {
                            background-position: -198px -135px;
                        }
                    }
                }
                .text {
                    line-height: 0.46rem;
                    padding-left: 0.3rem;
                    .text-content {
                        display: inline-block;
                        vertical-align: middle;
                        max-width: 80%; /*要显示文字的宽度*/
                        overflow: hidden; /*超出的部分隐藏起来。*/
                        white-space: nowrap; /*不显示的地方用省略号...代替*/
                        text-overflow: ellipsis;
                        margin-right: 0.2rem;
                    }
                    .not-read-sign {
                        background: $strong_red;
                        color: $white;
                        padding: 0.08rem 0.16rem;
                        border-radius: 0.04rem;
                        &.read-sign {
                            background: $ph_color;
                        }
                        &.scan {
                            border: 1px solid $orange;
                            color: $orange;
                            background: transparent;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }

    .el-dialog {
        .content {
            height: auto;
            padding: 0;
        }
    }
</style>
